<template>
  <div>
    <div class="header">
      <img src="箭头.png" @click="fx()" />
      <h3>实用主义的轻奢空间</h3>
    </div>
    <div class="banner">
      <img src="banners.png" alt />
    </div>
    <!-- 内容 -->
    <div class="cont">
      <span>使用主义的轻奢空间,附赠漂亮的女朋友一群</span>
      <div class="style">
        <span>户型改造</span>
        <span>开放式厨房</span>
        <span>阳台</span>
        <span>原木色</span>
      </div>
      <div class="jia">
        <span>
          案例价40
          <span class="cont_two">万</span>
        </span>
      </div>
    </div>
    <div class="ccoobj">
      <div class="ccoo">
        <div class="ccoo1">
          <p>户型</p>
          <span>3室2厅2卫</span>
        </div>
        <div class="ccoo1">
          <p>面积</p>
          <span>140平</span>
        </div>
        <div class="ccoo1">
          <p>地区</p>
          <span>西安</span>
        </div>
        <div class="ccoo1">
          <p>风格</p>
          <span>现代简约</span>
        </div>
      </div>
    </div>
    <div class="serve">
      <span>服务流程</span>
      <span @click="fy()">查询详情></span>
      <div class="fws">
        <Plan />
        <Plan />
        <Plan />
        <Plan />
      </div>
    </div>
    <div>
      <Content />
      <Content />
      <Content />
      <Content />
    </div>
    <div class="bottom">
      <span>创建于2020.9.9</span>
      <p>文章由作者自行上传，仅代表作者观点，本文版权归集景Studio所有，若需转载或有其他请求请联系作者</p>
    </div>

    <div class="low">
      <span>
        <img src="logo.jpg" alt />
      </span>
      <button class="tel">
        电话咨询
        <br />
        <p>沟通效率更高</p>
      </button>
    </div>
  </div>
</template>

<script>
import Content from "@/components/trim/content.vue";
import Plan from "@/components/trim/plan.vue";
export default {
  components: {
    Content,
    Plan,
  },
  methods: {
    fx() {
      this.$router.push("/shop");
    },
    fy() {
      this.$router.push("/flow");
    },
  },
};
</script>

<style scoped>
.header {
  background: white;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: fixed;
  top: 0;
  padding-right: 40px;
  padding-left: 20px;
}
.header h3 {
  text-align: center;
  font-weight: bold;
}
.header img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 5px;
}
.banner img {
  width: 100%;
  margin-top: 40px;
}
.cont {
  width: 90%;
  margin: 0 auto;
}
.cont span {
  font-size: 20px;
  font-weight: bold;
}
.style {
  /* width: 90%;
  margin: 0 auto; */
  margin-top: 10px;
}
.style span {
  margin-right: 10px;

  font-size: 12px;
  background: #f4f0ec;
  color: #a88f67;
  padding: 5px 10px;
  border-radius: 10px;
}
.cont .cont_two {
  font-size: 12px;
}
.jia {
  margin-top: 30px;
}
.serve {
  width: 90%;
  height: 100px;
  background: white;
  margin: 0 auto;
  position: relative;
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 20px;
}
.serve span:nth-of-type(1) {
  font-size: 16px;
  font-weight: bold;
}
.serve span:nth-of-type(2) {
  font-size: 12px;
  float: right;
  margin-top: 5px;
  color: #9a9a9a;
}
.fws {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ccoo1 span {
  font-size: 16px;
}
.ccoo1 p {
  font-size: 14px;
}
.ccoo {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  height: 80px;
}
.ccoobj {
  background: -webkit-linear-gradient(top, white, #f4f3f1);
}

.bottom {
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  margin-top: 20px;
  color: #717171;
}

.low {
  width: 100%;
  margin: 0 auto;
  display: flex;
  position: fixed;
  bottom: 0;
  background: white;
}
.low img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.low span {
  margin-left: 20px;
}
.low .tel {
  background: #222222;
  width: 250px;
  height: 45px;
  /* line-height: 45px; */
  text-align: center;
  margin-left: 10px;
  border-radius: 2px;
  border: none;
  color: white;
  margin-top: 14px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 5px;
}
.low p {
  font-size: 8px;
  text-align: center;
  color: #a7a7a7;
  margin-right: 14px;
  letter-spacing: 0px;
}
</style>  